import { Space, Switch, Table, Button, Row, Col, Modal } from "antd";
import React, { useState } from "react";
import JobFormDemo from "./component/JobForm";

const columns = [
  {
    title: "类型ID",
    dataIndex: "objectId",
    key: "objectId",
    // with: "11%",
  },
  // {
  //   title: "名称",
  //   dataIndex: "jobname",
  //   key: "jobname",
  //   with: "11%",
  // },
  // {
  //   title: "薪资",
  //   dataIndex: "salary",
  //   key: "salary",
  //   with: "11%",
  // },
  // {
  //   title: "性质",
  //   dataIndex: "jobkind",
  //   key: "jobkind",
  //   with: "11%",
  // },
  {
    title: "工作类型",
    dataIndex: "jobcate",
    key: "jobcate",
    // width: "12%",
    // with: "11%",
  },
  // {
  //   title: "区域",
  //   dataIndex: "jobarea",
  //   key: "jobarea",
  //   with: "11%",
  // },
  // {
  //   title: "结算",
  //   dataIndex: "moneyget",
  //   key: "moneyget",
  //   with: "11%",
  // },
  // {
  //   title: "性别",
  //   dataIndex: "gender",
  //   key: "gender",
  //   with: "11%",
  // },
  {
    title: "操作",
    with: "11%",
    render: () => {
      return (
        <Space>
          <Button type="primary" size="small">
            编辑类型
          </Button>
          <Button type="primary" size="small" danger>
            删除类型
          </Button>
        </Space>
      );
    },
  },
];
const data = [
  {
    objectId: 1,
    // jobname: "收银员",
    // salary: "5000元/月",
    // jobkind: "全职",
    jobcate: "商超零售",
    // jobarea: "厦门市/思明区",
    // moneyget: "月结",
    // gender: "女生可做",

    children: [
      {
        objectId: 2,
        jobcate: "收银员",
        // age: 42,
        // address: "New York No. 2 Lake Park",
      },
    ],
  },
]; // rowSelection objects indicates the need for row selection

const rowSelection = {
  onChange: (selectedRowKeys, selectedRows) => {
    console.log(
      `selectedRowKeys: ${selectedRowKeys}`,
      "selectedRows: ",
      selectedRows
    );
  },
  onSelect: (record, selected, selectedRows) => {
    console.log(record, selected, selectedRows);
  },
  onSelectAll: (selected, selectedRows, changeRows) => {
    console.log(selected, selectedRows, changeRows);
  },
};

const JobCateForm = () => {
  // 弹窗
  let [isModalOpen, setIsModalOpen] = useState(false);
  const showModal = () => {
    setIsModalOpen(true);
  };

  const handleOk = () => {
    setIsModalOpen(false);
  };

  const handleCancel = () => {
    setIsModalOpen(false);
  };

  return (
    <>
      <Row justify="end">
        <Col>
          <Button type="primary" onClick={showModal}>
            新增类型
          </Button>
        </Col>
      </Row>
      <Modal
        title="新增岗位类型"
        open={isModalOpen}
        onOk={handleOk}
        onCancel={handleCancel}
      >
        <JobFormDemo></JobFormDemo>
      </Modal>
      <Space
        align="center"
        style={{
          marginBottom: 16,
        }}
      ></Space>
      <Table
        columns={columns}
        rowSelection={{ ...rowSelection }}
        dataSource={data}
      />
    </>
  );
};

export default JobCateForm;
